<template>
  <div class="bargain-add views-container">
    <div class="wlm-form">
      <div class="wlm-form-content">
        <div v-for="(item,index) in roots" :key="index">
          <!-- {{item}} -->
          <div style="margin-left:10px;">{{item.title}}</div>
          <div style="display:flex;flex-wrap:wrap;">
            <!-- <router-link tag="span" to="/application/addActivity">
                <el-button size="small" type="primary">添加活动</el-button>
            </router-link>-->
            <div v-for="(root,i) in item.rootes" :key="i">
              <router-link tag="span" :to="root.path" >
                <div style="padding:10px;">
                  <div class="lihe-box">
                    <img src="../../assets/image/11.png" width="42px" height="42px" />
                    <div style="margin-left:10px;">
                      <div>{{root.title}}</div>
                      <div class="two-line-hide">11向客户发放优惠券向客户发放优惠券向发就剩对接翻山倒海发水电费客户发放优惠券向客户发</div>
                    </div>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { asyncPluginsMap } from "@/router";
export default {
  created() {
    this.rootsHandel();
  },
  data() {
    return {
      roots: {
        marketing: {
          title: "营销玩法",
          rootes: [],
        },
        customer: {
          title: "客服维群",
          rootes: [],
        },
        tool: {
          title: "套餐工具",
          rootes: [],
        },
      },
    };
  },
  methods: {
    rootsHandel() {
      console.log("路由", asyncPluginsMap);
      //存在应用路由
      if (asyncPluginsMap instanceof Array && asyncPluginsMap.length > 0) {
        //存在子路由
        if (
          asyncPluginsMap[0] instanceof Object &&
          !!asyncPluginsMap[0].children
        ) {
          const rootPaths = asyncPluginsMap[0].children,
            roots = this.roots;

          rootPaths.map((root) => {
            // 主模块，并且模块存在
            if (
              !!root.app_is_model &&
              !!root.app_model &&
              !!roots[root.app_model]
            ) {
              roots[root.app_model].rootes.push({
                title: root.meta.title, //应用标题
                path: "/application/" + root.path, //应用路由
                param:root.app_param,//属性
              });
            }
          });

          this.roots = roots;
        }
      }

      console.log("整理后路由", this.roots);
    },
  },
};
</script>
<style lang="scss" scoped>
.two-line-hide {
  width: 260px;
  overflow: hidden; //超出文本隐藏
  text-overflow: ellipsis; //溢出省略号显示
  display: -webkit-box; //将对象作为弹性伸缩盒子
  -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式-从上到下垂直排列
  -webkit-line-clamp: 2; //这个属性不是css的规范属性，需要组合上面两个属性，数组代表显示的行数,如2,3,4....
}
.lihe-box {
  width: 360px;
  border: 1px solid #ffdbcb;
  background: #fff9f7;
  display: flex;
  border-radius: 4px;
  padding: 10px;
}
</style>